<template>
  <div class="messageDetail">
    <iu-header>
      <template #left>
        <x-icon
          @click="spotCheckView"
          type="ios-arrow-back"
          size="21"
          fill="#fff"
        ></x-icon>
      </template>
      <template #title>
        详情
      </template>
      <template #right>
       <div v-focusable  @click="backToHomepage">
          <iconSvg name="home" w="20px" h="22px" class="right_icon"></iconSvg>
        </div>
      </template>
    </iu-header>
    <div class="sys-message-nfo">
      <div class="info-list">
        <div class="info-list-item">
          <div class="info-title">标&nbsp;&nbsp;题：</div>
          <div class="info-value">
            {{ detail.title }}
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">时&nbsp;&nbsp;间：</div>
          <div class="info-value">
            {{ detail.eventStartTime | formatDate }}
            <span v-if="detail.eventEndTime"
              >- {{ detail.eventEndTime | formatDate }}</span
            >
          </div>
        </div>
        <div class="info-list-item">
          <div class="info-title">内&nbsp;&nbsp;容：</div>
          <div class="info-value" v-html="detail.content"></div>
        </div>
        <div class="info-list-item">
          <div class="info-title">附&nbsp;&nbsp;件：</div>
          <template v-if="detail.url">
            <div class="info-value">
              <div
                style="margin:6px 0;"
                v-for="(item, index) in detail.url.split(',')"
                :key="index"
              >
                <a :href="item" target="_blank">{{ item }}</a>
              </div>
            </div>
          </template>
          <div class="info-value" v-else>
            <span>无</span>
          </div>
        </div>
        <!--        <div class="info-list-item">-->
        <!--          <div class="info-title">附&nbsp;&nbsp;件：</div>-->
        <!--          <div class="info-value">-->
        <!--            <template v-if="detail.imageFiles && detail.imageFiles.length">-->
        <!--              <x-img-->
        <!--                v-for="item in detail.imageFiles"-->
        <!--                :src="item.resizeUrl"-->
        <!--                :key="item.id"-->
        <!--                @click.native="showImage(item)"-->
        <!--              ></x-img>-->
        <!--            </template>-->
        <!--            <template v-else>-->
        <!--              无-->
        <!--            </template>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
    </div>
    <showImg
      :list="fileList"
      :index="showImgIndex"
      :show.sync="showImg"
    ></showImg>
  </div>
</template>

<script>
import { XImg } from "vux";
import showImg from "@/components/common/showImg/showImg";
import iuHeader from "@/components/common/header/index";
/* import BScroll from "better-scroll"; */
import EarlywarningDao from "@/daos/earlywarning_dao";
import WorkSheetDao from "@/daos/work_sheet_dao";
import { Privilege } from "@/mixin";
import SystemMessageDao from "@/daos/system_message_dao";

export default {
  inject: ["backToHomepage"],
  components: {
    XImg,
    showImg,
    iuHeader
  },
  data() {
    return {
      detail: {},
      fileList: [],
      showImgIndex: 0,
      showImg: false,
      imgUrl: "",
      showDialog: false,
      showDialogImg: false,
      status: 0,
      typeList: [{ value: 1, label: "培训通知" }]
    };
  },
  activated() {
    this.id = this.$route.query.id || 0;
    this.getMessageDetail(this.id);
  },
  mixins: [Privilege],
  methods: {
    findName(arr, source, targetValue = "name", sourceValue = "code") {
      if (!Array.isArray(arr)) {
        return;
      }
      let res = arr.find(e => e[sourceValue] === source);
      return res && res[targetValue] ? res[targetValue] : "";
    },
    spotCheckView() {
      history.back(-1);
    },
    showImage(index, files) {
      this.fileList.splice(0);
      this.fileList = files.map(e => e.url);
      this.showImgIndex = index;
      this.showImg = true;
    },
    toWorkSheetNo(id) {
      this.$router.push({
        name: "workOrderDetails",
        query: {
          id
        }
      });
    },
    getMessageDetail(id) {
      SystemMessageDao.getDetail(id, res => {
        if (res) {
          this.detail = res;
        }
      });
    },
    changeStatue(status) {
      this.status = status;
      this.showDialog = true;
    },
    handleConfirm() {
      this.handleChangeStatus(this.id, this.status);
      this.showDialog = false;
    },
    show(index) {
      // this.$refs.previewer.show(index);
    }
  }
};
</script>

<style lang="less" scoped>
.messageDetail {
  box-sizing: border-box;
  height: auto;
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #18182c;
}
.sys-message-nfo {
  height: auto;
  margin-bottom: 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  .info-list {
    margin: 8px;
    padding: 8px 16px;
    background: #22233f;
    border-radius: 3px;
    > div {
      margin: 8px 0;
    }
    .info-list-item {
      display: flex;
      flex-wrap: wrap;
      line-height: 20px;
    }
    .info-title {
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
      // margin-right: 30px;
      width: 80px;
      text-align: right;
    }

    .info-value {
      flex: 1;
      font-size: 16px;
      color: #fff;
      a {
        color: #fff;
      }
      img {
        max-width: 100px;
        height: auto;
        margin-bottom: 8px;
        margin-right: 8px;
      }

      &.alarmLevel1 {
        color: #409eff;
      }
      &.alarmLevel3 {
        color: #ffb62c;
      }
      &.alarmLevel5 {
        color: #ff2c2c;
      }

      &.status1 {
        color: #f56c6c;
      }
      &.status3 {
        color: #409eff;
      }
      &.status5,
      &.status9 {
        color: gray;
      }

      &.priority1 {
        color: #456de6;
      }
      &.priority2 {
        color: #d98806;
      }
      &.priority3 {
        color: red;
      }
    }
    .warning {
      color: #ff2c2c;
    }
  }
  .info-other-title {
    padding: 0 16px;
    color: #fff;
    font-size: 16px;
  }
}

.timeLine {
  display: flex;
  color: #fff;
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
<style lang="less">
.early_comment_dialog {
  .weui-dialog {
    top: 30% !important;
  }
  .comment_input_btn {
    display: flex;
    justify-content: space-between;
    > div {
      flex: 1;
    }
  }
}
.early_img_dialog {
  .img-close {
    text-align: right;
    margin-right: 24px;
    margin-top: 30px;
  }
  .show-img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 80vh;
    img {
      max-width: 100%;
      height: auto;
    }
  }
}
</style>
